<template>
  <el-form-item label="控件文本">
    <el-input v-model="state.activeData.buttonText" placeholder="请输入控件文本" />
  </el-form-item>
  <el-form-item label="颜色">
    <el-select v-model="state.activeData.type" placeholder="请选择">
      <el-option label="默认按钮" value=""></el-option>
      <el-option label="主要按钮" value="primary"></el-option>
      <el-option label="成功按钮" value="success"></el-option>
      <el-option label="信息按钮" value="info"></el-option>
      <el-option label="警告按钮" value="warning"></el-option>
      <el-option label="危险按钮" value="danger"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="样式">
    <el-select v-model="state.style" placeholder="请选择">
      <el-option label="朴素按钮" value="plain"></el-option>
      <el-option label="文字按钮" value="text"></el-option>
      <el-option label="链接按钮" value="link"></el-option>
      <el-option label="圆角按钮" value="round"></el-option>
      <el-option label="圆形按钮" value="circle"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="大小">
    <el-select v-model="state.activeData.size" placeholder="请选择">
      <el-option label="较大" value="large"></el-option>
      <el-option label="中等" value="default"></el-option>
      <el-option label="较小" value="small"></el-option>
    </el-select>
  </el-form-item>
</template>
<script setup lang="ts" name="GoodButton">
import { reactive, watch } from "vue";
const props = defineProps({
  activeData: {
    type: Object,
    default: null
  }
});
const state = reactive({
  activeData: {} as any,
  style: "",
  isText: false,
  isLink: false,
  isCircle: false
});
const propsData = toRef(props);
state.activeData = propsData.value.activeData;

watch(
  () => state.style,
  () => {
    // 重置所有样式属性为 false
    state.activeData.text = false;
    state.activeData.plain = false;
    state.activeData.link = false;
    state.activeData.round = false;
    state.activeData.circle = false;

    // 根据选择的样式设置对应属性为 true
    switch (state.style) {
      case "plain":
        state.activeData.plain = true;
        break;
      case "text":
        state.activeData.text = true;
        break;
      case "link":
        state.activeData.link = true;
        break;
      case "round":
        state.activeData.round = true;
        break;
      case "circle":
        state.activeData.circle = true;
        break;
      default:
        state.activeData.text = false;
        state.activeData.link = false;
        state.activeData.round = false;
        state.activeData.circle = false;
        state.activeData.plain = false;
        break;
    }
  }
);
const emits = defineEmits(["updateActiveData"]);
watch(
  () => state.activeData,
  val => {
    emits("updateActiveData", val);
  }
);
</script>
